<!doctype html>
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <!-- Global site tag (gtag.js) - Google Analytics -->
    <script async src="https://www.googletagmanager.com/gtag/js?id=UA-119008715-1"></script>
    <script>
        window.dataLayer = window.dataLayer || [];
        function gtag(){dataLayer.push(arguments);}
        gtag('js', new Date());

        gtag('config', 'UA-119008715-1');
    </script>

    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
    <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">

    <style type="text/css">
        * { font-weight: 100; }
        h1 { font-weight: 100; }
        #graph-container {
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            position: fixed;
        }

        .nn-picker {
            width: 410px;
            margin: 30px;
            z-index: 1000;
        }

        [data-toggle="collapse"] .fa:before {
            font-size: 2rem;
            color: black;
            content: "\f106";
            position: relative;
            top: 5px;
        }
        .fa {
          transition: 0.3s transform ease-in-out;
        }
        .collapsed .fa {
          transform: rotate(-180deg);
        }
        .tab-content {
            padding: 20px;
        }
        input[type="range"] {
            margin-left: 10px;
        }
        #count {
            position: fixed;
            bottom: 0;
            right: 1rem;
            opacity: 0.4;
            font-weight: 100;
        }
        .text {
            font-weight: 300;
        }
    </style>

    <title>NN SVG</title>

</head>
<body>


    <div id="graph-container"></div>

    <div class="container-fluid">

        <div class="row">
            <div class="nn-picker">
                <div class="card">
                    <div class="card-header">
                        <a class="pull-right" data-toggle="collapse" href="#collapsable" role="button"><i class="fa"></i></a>
                        <h1>NN-SVG</h1>
                        <p>Publication-ready NN-architecture schematics. <a id="download" href="#">Download SVG</a></p>

                        <nav>
                            <div class="nav nav-tabs card-header-tabs" role="tablist">
                                <a class="nav-item nav-link" href="index.html">FCNN style</a>
                                <a class="nav-item nav-link active">LeNet style</a>
                                <a class="nav-item nav-link" href="AlexNet.html">AlexNet style</a>
                            </div>
                        </nav>

                    </div>
                    <div class="tab-content collapse show" id="collapsable">

                        <div class="tab-pane fade show active" id="LeNet" role="tabpanel">
                            <h4>Style:</h4>

                            <div>
                                <input type="color" value="#e0e0e0" id="color1">
                                <label for="color1">Color 1</label>
                            </div>
                            <div>
                                <input type="color" value="#a0a0a0" id="color2">
                                <label for="color2">Color 2</label>
                            </div>
                            <div>
                                <label for="rectOpacity">Filter Opacity</label>
                                <input type="range" id="rectOpacity" name="" min="0.2" max="1" step="0.01" value="0.9" style="position: relative; top: 3px;">
                            </div>
                            <div>
                                <label for="borderWidth">Border Width</label>
                                <input type="range" id="borderWidth" name="" min="0.01" max="3" step="0.01" value="1" style="position: relative; top: 3px;">
                            </div>
                            <div>
                                <label for="betweenSquares">Spacing Between Filters</label>
                                <input type="range" id="betweenSquares" name="" min="1" max="40" step="1" value="10" style="position: relative; top: 3px;">
                            </div>
                            <div>
                                <input type="checkbox" id="showLabels" name="showLabels" value="showLabels" checked>
                                <label for="showLabels">Show Layer Labels</label>
                            </div>

                            <hr>
                            <h4>Architecture:</h4>
                            <div id="architecture">
                                <p>Depth | Height | Width | filter Height | filter Width</p>
                                <div class="row entry">
                                    <div class="input-group mb-2 mr-sm-2 col-12">
                                        <button class="btn btn-secondary btn-remove input-group-prepend"><span class="fa fa-minus"></span></button>
                                        <input type="number" class="form-control" name="numberOfSquares" step="1" value="8" />
                                        <input type="number" class="form-control" name="squareHeight" step="1" value="128" />
                                        <input type="number" class="form-control" name="squareWidth" step="1" value="128" />
                                        <input type="number" class="form-control" name="filterHeight" step="1" value="8" />
                                        <input type="number" class="form-control" name="filterWidth" step="1" value="8" />
                                    </div>
                                    <div class="input-group mb-2 mr-sm-2 col-12">
                                        <label for="Op" style="width: 36px;padding: 4px;">Op: </label>
                                        <input type="text"  class="form-control" name="Op" step="1" value="Max-Pool" />
                                        <input type="range" class="form-control" name="spacing" min="-100" max="100" step="1" value="40" style="margin-left: 10px !important;">
                                    </div>
                                </div>
                                <div class="row entry">
                                    <div class="input-group mb-2 mr-sm-2 col-12">
                                        <button class="btn btn-secondary btn-remove input-group-prepend"><span class="fa fa-minus"></span></button>
                                        <input type="number" class="form-control" name="numberOfSquares" step="1" value="8" />
                                        <input type="number" class="form-control" name="squareHeight" step="1" value="64" />
                                        <input type="number" class="form-control" name="squareWidth" step="1" value="64" />
                                        <input type="number" class="form-control" name="filterHeight" step="1" value="16" />
                                        <input type="number" class="form-control" name="filterWidth" step="1" value="16" />
                                    </div>
                                    <div class="input-group mb-2 mr-sm-2 col-12">
                                      <label for="Op" style="width: 36px;padding: 4px;">Op: </label>
                                      <input type="text"  class="form-control" name="Op" step="1" value="Convolution" />
                                      <input type="range" class="form-control" name="spacing" min="-100" max="100" step="1" value="10" style="margin-left: 10px !important;">
                                    </div>
                                </div>
                                <div class="row entry">
                                    <div class="input-group mb-2 mr-sm-2 col-12">
                                        <button class="btn btn-secondary btn-remove input-group-prepend"><span class="fa fa-minus"></span></button>
                                        <input type="number" class="form-control" name="numberOfSquares" step="1" value="24" />
                                        <input type="number" class="form-control" name="squareHeight" step="1" value="48" />
                                        <input type="number" class="form-control" name="squareWidth" step="1" value="48" />
                                        <input type="number" class="form-control" name="filterHeight" step="1" value="8" />
                                        <input type="number" class="form-control" name="filterWidth" step="1" value="8" />
                                    </div>
                                    <div class="input-group mb-2 mr-sm-2 col-12">
                                      <label for="Op" style="width: 36px;padding: 4px;">Op: </label>
                                      <input type="text"  class="form-control" name="Op" step="1" value="Max-Pool" />
                                      <input type="range" class="form-control" name="spacing" min="-100" max="100" step="1" value="-20" style="margin-left: 10px !important;">
                                    </div>
                                </div>
                                <div class="row entry">
                                    <div class="input-group mb-2 mr-sm-2 col-12">
                                        <button class="btn btn-secondary btn-remove input-group-prepend"><span class="fa fa-minus"></span></button>
                                        <input type="number" class="form-control" name="numberOfSquares" step="1" value="24" />
                                        <input type="number" class="form-control" name="squareHeight" step="1" value="16" />
                                        <input type="number" class="form-control" name="squareWidth" step="1" value="16" />
                                        <input type="number" class="form-control" name="filterHeight" step="1" value="8" />
                                        <input type="number" class="form-control" name="filterWidth" step="1" value="8" />
                                    </div>
                                    <div class="input-group mb-2 mr-sm-2 col-12">
                                      <label for="Op" style="width: 36px;padding: 4px;">Op: </label>
                                      <input type="text"  class="form-control" name="Op" step="1" value="Dense" />
                                      <input type="range" class="form-control" name="spacing" min="-100" max="100" step="1" value="-20" style="margin-left: 10px !important;">
                                    </div>
                                </div>
                                <div class="row entry">
                                    <div class="input-group mb-2 mr-sm-2 col-12">
                                        <button class="btn btn-primary btn-add input-group-prepend"><span class="fa fa-plus"></span></button>
                                        <input type="number" class="form-control" name="numberOfSquares" step="1"/>
                                        <input type="number" class="form-control" name="squareHeight" step="1"/>
                                        <input type="number" class="form-control" name="squareWidth" step="1"/>
                                        <input type="number" class="form-control" name="filterHeight" step="1"/>
                                        <input type="number" class="form-control" name="filterWidth" step="1"/>
                                    </div>
                                    <div class="input-group mb-2 mr-sm-2 col-12">
                                      <label for="Op" style="width: 36px;padding: 4px;">Op: </label>
                                      <input type="text"  class="form-control" name="Op" step="1" value="" />
                                      <input type="range" class="form-control" name="spacing" min="-100" max="100" step="1" value="10" style="margin-left: 10px !important;">
                                    </div>
                                </div>

                            </div>

                            <hr>
                            <div id="architecture2">
                                <p>Vector Length</p>
                                <div class="row entry">
                                    <div class="input-group mb-2 mr-sm-2 col-5">
                                        <button class="btn btn-secondary btn-remove input-group-prepend"><span class="fa fa-minus"></span></button>
                                        <input type="number" class="form-control" name="vectorLength" step="1" value="256" />
                                    </div>
                                </div>
                                <div class="row entry">
                                    <div class="input-group mb-2 mr-sm-2 col-5">
                                        <button class="btn btn-secondary btn-remove input-group-prepend"><span class="fa fa-minus"></span></button>
                                        <input type="number" class="form-control" name="vectorLength" step="1" value="128" />
                                    </div>
                                </div>
                                <div class="row entry">
                                    <div class="input-group mb-2 mr-sm-2 col-5">
                                        <button class="btn btn-primary btn-add input-group-prepend"><span class="fa fa-plus"></span></button>
                                        <input type="number" class="form-control" name="vectorLength" step="1"/>
                                    </div>
                                </div>

                            </div>

                        </div>

                </div>
            </div>
        </div>
    </div>

    <div id="count"><a style="font-size: 1rem" href="about.html">About</a></div>


    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

    <script type="text/javascript" src="https://d3js.org/d3.v5.min.js"></script>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/underscore@1.13.0/underscore-umd-min.js"></script>

    <script type="text/javascript" src="util.js"></script>
    <script type="text/javascript" src="LeNet.js"></script>

    <script type="text/javascript">

lenet = LeNet();

function restart() {

    architecture = $('#architecture').find('.entry').map((i,el) =>
        _.object(['numberOfSquares','squareHeight','squareWidth','filterHeight','filterWidth', 'op', 'layer'],
                 $(el).find('input[type="number"]').map((j,input) => parseFloat($(input).val())).get().concat([$(el).find('input[type="text"]').val(), i]))
        ).get()
         .filter(layer => Object.values(layer).every(val => !_.isNaN(val)));

    betweenLayers = $('#architecture').find('input[type="range"]').map((i,el) => $(el).val()).get().filter(input => $.isNumeric(input)).map(s => parseInt(s)); betweenLayers.pop();

    architecture2 = $('#architecture2').find('input').map((i,el) => $(el).val()).get().filter(input => $.isNumeric(input)).map(s => parseInt(s));

    lenet.redraw({'architecture_':architecture, 'architecture2_':architecture2});
    lenet.redistribute({'betweenLayers_':betweenLayers});

}

restart();

/////////////////////////////////////////////////////////////////////////////
                ///////    Select Styling    ///////
/////////////////////////////////////////////////////////////////////////////

$("#color1").change(         function () { lenet.style({'color1_': this.value}); });
$("#color2").change(         function () { lenet.style({'color2_': this.value}); });
$("#borderWidth").change(    function () { lenet.style({'borderWidth_': parseFloat(this.value)}); });
$("#rectOpacity").change(    function () { lenet.style({'rectOpacity_': parseFloat(this.value)}); });
$("#betweenSquares").change( function () { lenet.redistribute({'betweenSquares_': parseFloat(this.value)}); });
$("#showLabels").change(     function () { lenet.style({'showLabels_': this.checked}); });

$("input[name='spacing']").change(function() {
    betweenLayers = $('#architecture').find('input[type="range"]').map((i,el) => $(el).val()).get().filter(input => $.isNumeric(input)).map(s => parseInt(s)); betweenLayers.pop();
    lenet.redistribute({'betweenLayers_':betweenLayers});
});


/////////////////////////////////////////////////////////////////////////////
                 ///////    Select Architecture    ///////
/////////////////////////////////////////////////////////////////////////////


$(document).on('click', '#architecture .btn-add', function(e) {
    e.preventDefault();

    var controlForm = $('#architecture');
    var currentEntry = $(this).parents('.entry:first');
    var newEntry = $(currentEntry.clone()).appendTo(controlForm);

    newEntry.find('input').val('');
    controlForm.find('.entry:not(:last) .btn-add')
        .removeClass('btn-add').addClass('btn-remove')
        .removeClass('btn-primary').addClass('btn-secondary')
        .html('<span class="fa fa-minus"></span>');

    restart();

});

$(document).on('click', '#architecture .btn-remove', function(e) {
    e.preventDefault();

    $(this).parents('.entry:first').remove();

    restart();

    return false;

});

$(document).on('click', '#architecture2 .btn-add', function(e) {
    e.preventDefault();

    var controlForm = $('#architecture2');
    var currentEntry = $(this).parents('.entry:first');
    var newEntry = $(currentEntry.clone()).appendTo(controlForm);

    newEntry.find('input').val('');
    controlForm.find('.entry:not(:last) .btn-add')
        .removeClass('btn-add').addClass('btn-remove')
        .removeClass('btn-primary').addClass('btn-secondary')
        .html('<span class="fa fa-minus"></span>');

    restart();

});

$(document).on('click', '#architecture2 .btn-remove', function(e) {
    e.preventDefault();

    $(this).parents('.entry:first').remove();

    restart();

    return false;

});

$(document).on('change', 'input[type="number"]', function(e) {
    e.preventDefault();

    restart();  // TODO only fire if the whole row is filled.

});

$(document).on('change', 'input[type="text"]', function(e) {
    e.preventDefault();

    restart();
});


d3.select("#download").on("click", function() {
    // ga('send', 'event', 'downloadSVG', 'LeNet');

    d3.select(this)
      .attr("href", 'data:application/octet-stream;base64,' + btoa(unescape(encodeURIComponent(d3.select("#graph-container").html()))))
      .attr("download", "nn.svg")
});

    </script>

</body>

</html>
